let pillowNum=1;//枕头序号
//初始化
function  init(){
	pillowNum=1;
	//各枕头的初始化位置
	$("#pillow1").css({left:"50%"})
	$("#pillow2").css({left:"150%"})
	$("#pillow3").css({left:"150%"})
	$("#pillow4").css({left:"150%"})
	pillowSlide()	//左右滑动枕头
	touchSwitchPillow()	//点击按钮转动枕头
	bottomBtn();//底部按钮相关跳转函数
	pillowDetail();//点击枕头查看枕头详情
}

//左右滑动枕头
function pillowSlide(){
	let bodyPageX1;
	let bodyPageX2;
	let bodyPageY;
	$("#switchPillow").on("touchstart",function(e){
		bodyPageX1=e.originalEvent.targetTouches[0].pageX;//获取触屏时按下的pageX
		bodyPageY=e.originalEvent.targetTouches[0].pageY;//获取触屏时按下的pageY
	})
	$("#switchPillow").on("touchend",function(e){
		bodyPageX2=e.originalEvent.changedTouches[0].pageX;//获取触屏手离开时的pageX
		if(bodyPageX1-bodyPageX2>20 && bodyPageY>75 && bodyPageY<350){//如果pageY在75-350，并且触屏时按下的和离开的记录超过了20，则判定滑动了（这里为右滑）
			if(pillowNum<4){
				pillowNum++;//枕头序号+1
				$("#pillow"+(pillowNum-1)).animate({left:"-50%"},500)//当前枕头向左移动超出屏幕
				$("#pillow"+pillowNum).animate({left:"50%"},500)//下一个枕头向右移动来到屏幕中间
				pillowDetail();
			}
		}
		if(bodyPageX1+20<bodyPageX2 && bodyPageY>75 && bodyPageY<350){//(这里为左滑)
			if(pillowNum>1){
				pillowNum--;//枕头序号-1
				$("#pillow"+(pillowNum)).animate({left:"50%"},500)//上一个枕头向左移动来到屏幕中间
				$("#pillow"+(pillowNum+1)).animate({left:"150%"},500)//当前枕头向右移动超出屏幕
				pillowDetail();
			}
		}
	})
	
}

//点击按钮转动枕头函数
function touchSwitchPillow(){
	let flag=true;//防抖开关
	$("#turnLeft").on("touchstart",function(){
		if(flag){//防止touchstart触发太多次
			flag=false;
			if(pillowNum>1){
				pillowNum--;//枕头序号-1
			}
			$("#pillow"+pillowNum).animate({left:"50%"},500)//上一个枕头向左移动来到屏幕中间
			$("#pillow"+(pillowNum+1)).animate({left:"150%"},500,function(){//当前枕头向右移动超出屏幕
				flag=true;
			})
			pillowDetail();
		}
	})
	$("#turnRight").on("touchstart",function(){
		if(flag){
			flag=false;
			if(pillowNum<4){
				pillowNum++;//枕头序号+1
			}
			$("#pillow"+pillowNum).animate({left:"50%"},500)//当前枕头向左移动超出屏幕
			$("#pillow"+(pillowNum-1)).animate({left:"-50%"},500,function(){//下一个枕头向右移动来到屏幕中间
				flag=true;
			})
			pillowDetail();
		}
	})
}

//底部关闭模态框按钮
function bottomBtn(){
	$("#returnIndex").on("touchstart",function(){
		window.location.href="index.html";
	})
	$("#sure").on("touchstart",function(){
		window.location.href="game.html?pn="+pillowNum;
	})
}

//点击查看详情
function pillowDetail(){
	let pillowPageX1;//触屏时的pageX
	let pillowPageX2;//触屏离开时的PageX
	let touchOneFlag=true;//防止touchstart触发太多次
	$("#pillow"+pillowNum).on("touchstart",fun1)
	$("#pillow"+pillowNum).on("touchend",fun2)
	$("#closeBtn").on("touchstart",function(){
		$("#pillow"+pillowNum).off("touchstart",fun1)
		$("#pillow"+pillowNum).off("touchend",fun2)
		touchOneFlag=true;
		$('#myModal').modal('hide');//关闭模态框
	})
	
	function fun1(e){
		pillowPageX1=e.originalEvent.targetTouches[0].pageX;//触屏时的pageX
		console.log(pillowPageX1)
	}
	function fun2(e){
		pillowPageX2=e.originalEvent.changedTouches[0].pageX;//触屏离开时的PageX
		if(Math.abs(pillowPageX1-pillowPageX2)<5){//如果两次的间距小于5，则判定为点击，而不是滑动
			if(touchOneFlag=true){
				console.log(pillowNum)
				touchOneFlag=false;
				$("#produceImg>img").attr("src","img/switchPillow/zhentou"+pillowNum+".png")//更换图片
				//进行信息的替换
				if(pillowNum==1){
					$("#produceName").html("[泰迪枕]")
					$("#produceInfo").html("来自优质赛诺太空棉的温感慢回弹，配合人体工学曲线造型，帮助您保持颈椎自然曲线，给您整晚的呵护与健康。可爱的泰迪熊刺绣，代表温暖、忠诚和守护")
				}
				if(pillowNum==2){
					$("#produceName").html("[雅典梦幻枕]")
					$("#produceInfo").html("优质赛诺太空棉，护颈、护肩、双层可调节，中部凹陷设计，自然牵引头部、稳定睡姿。有效填充颈下空间，提供整晚舒适承托，仰睡舒适，侧卧也安逸")
				}
				if(pillowNum==3){
					$("#produceName").html("[安琪儿枕]")
					$("#produceInfo").html("优质赛诺太空棉，慢回弹特质，舒缓肩颈压力。人体工学的枕面设计，紧密贴合头颈曲线，维护颈椎健康。精美安琪儿刺绣，代表快乐、灵气和可爱")
				}
				if(pillowNum==4){
					$("#produceName").html("[太空智能枕]")
					$("#produceInfo").html("太空棉技术全面升级，透气性能大幅提升。棉芯采用崭新有机发泡技术，异形切割枕型紧密贴合颈椎曲线，更添加有机大豆油及负离子成分，清新自然守护")
				}
				$('#myModal').modal('show');//打开模态框
			}
		}
	}
}


init()
